 import React,{ Component } from 'react';
 import { 
   SortDetailStyle,
   SortDetailNavStyle,
   SortDetailListsStyle,
   SortDetailImgStyle,
   SortDetailInfoStyle
   } from './SortDetailStyle';
 import {Link} from 'react-router-dom'
 import BScroll from 'better-scroll'

 import HomeCommon from 'pages/home/HomeCommon'

 const Item = ( props ) => {
   return(
      <li>
        <span>{ props.name }</span>
        <i className="fa fa-angle-down"></i>
      </li>
   )
 }

 const SortItem = ( props ) => {
   return(
    <Link to='/home'>
        <SortDetailImgStyle>
          <img src={ props.image_url_set.dx_image && props.image_url_set.dx_image[800] || props.image_url_set.single[800] }/>
          <img src='http://p0.jmstatic.com/banner/area/000/000/029.jpg' className="small"/>
        </SortDetailImgStyle>
        <SortDetailInfoStyle>
          <div className="title">
            { props.short_name}
          </div>
          <div className="price">
          <span className="jumei-price">￥{ props.jumei_price }</span>
          <span className="market-price">￥{ props.market_price } </span>
          </div>
        </SortDetailInfoStyle>
    </Link>
   )
 }

 class SortDetail extends Component{

  constructor () {
    super()
    this.state = {
      navList:[
        {
          id:1,
          name:'品牌',
        },
        {
          id:2,
          name:'分类',
        },
        {
          id:3,
          name:'功效',
        },
        {
          id:4,
          name:'价格',
        },
      ]
    }
  }

  componentDidMount () {
    this.props.getSortDetailList(1)
    //this.props.location.pamams.id

    this.scroll = new BScroll ( this.box,{
      mouseWheel: {
          speed: 10,
          invert: false,
          easeTime: 300
         },
         pullUpLoad: {
          threshold: 50 //开启上拉事件
      },
         click: true
  } )
    this.props.change_title(' ')
  }



  renderItem = () => {
    return this.state.navList.map( item => {
      return <Item key={item.id} {...item}/>
    })
  }

  renderSortItem = () => {
    return this.props.sort_detail && this.props.sort_detail.map( item => {
      return <SortItem key={ item.product_id} {...item}/>
    })
  }
     render () {
         return (
         <SortDetailStyle ref={ el => this.box =el }>
           {/* ID:  { this.props.match.params.id && this.props.match.params.id } */}
           <div>
              <SortDetailNavStyle>
                <ul>
                  {
                    this.renderItem()
                  }
                </ul>
              </SortDetailNavStyle>

              <SortDetailListsStyle>
                  
                  {
                    this.renderSortItem()
                  }
              </SortDetailListsStyle>

           </div>
         </SortDetailStyle>
         )
     }
 }

 export default HomeCommon(SortDetail)